<template>
  <div>
    <div :header="isAdd ? '添加物料' : '编辑物料'" width="70%">
      <t-collapse :default-value="[0]">
        <t-collapse-panel header="基础信息">
          <div>
            <t-form :data="formData" :colon="true">
              <t-space>
                <t-row :gutter="15">
                  <!-- <t-col :span="4" class="form_col">
                    <t-form-item label="项目编号" name="FMATERIALID">
                      <t-input v-model="formData.FMATERIALID" />
                    </t-form-item>
                  </t-col> -->
                  <t-col :span="4" class="form_col">
                    <t-form-item label="料号" name="FNumber">
                      <t-input v-model="formData.FNumber" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4" class="form_col">
                    <t-form-item label="名称" name="FName">
                      <t-input v-model="formData.FName" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="规格型号" name="FSpecification">
                      <t-input v-model="formData.FSpecification" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="物料分组" name="FMaterialGroup">
                      <!-- <t-select v-model="formData.FMaterialGroup" placeholder="请输入内容">
                        <t-option
                          v-for="(item, index) in materGroupList"
                          :key="index"
                          :label="item.FName"
                          :value="item.FNumber"
                          >{{ item.FName }}</t-option
                        >
                      </t-select> -->
                      <t-tree-select
                        v-model="formData.FMaterialGroup"
                        :data="materGroupList"
                        clearable
                        placeholder="请选择"
                      />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="物料属性" name="FErpClsID">
                      <t-tree-select
                        v-model="formData.FErpClsID"
                        :data="materGroupList"
                        clearable
                        placeholder="请选择"
                      />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="套件" name="FErpClsID">
                      <t-select v-model="formData.FErpClsID" placeholder="请输入内容">
                        <t-option label="是" value="1">是</t-option>
                        <t-option label="否" value="0">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="存货类别" name="FCategoryID">
                      <t-select v-model="formData.FCategoryID" placeholder="请输入内容">
                        <t-option
                          v-for="(item, index) in materTypeList"
                          :key="index"
                          :label="item.FName"
                          :value="item.FCATEGORYID"
                          >{{ item.FName }}</t-option
                        >
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="是否启用" name="FForbidStatus">
                      <t-select v-model="formData.FForbidStatus" placeholder="请输入内容">
                        <t-option label="是" value="A">是</t-option>
                        <t-option label="否" value="B">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="发料方式" name="FIssueType">
                      <t-select v-model="formData.FIssueType" placeholder="请输入内容">
                        <t-option label="是" value="A">是</t-option>
                        <t-option label="否" value="B">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="发超发控制方式" name="FOverControlMode">
                      <t-select v-model="formData.FOverControlMode" placeholder="请输入内容">
                        <t-option label="是" value="A">是</t-option>
                        <t-option label="否" value="B">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="最小发料批量" name="FMinIssueQty">
                      <t-input v-model="formData.FMinIssueQty" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4" class="form_col">
                    <t-form-item label="倒冲数量" name="FBackFlushType">
                      <t-input v-model="formData.FBackFlushType" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="计划策略" name="FPlanningStrategy">
                      <t-select v-model="formData.FPlanningStrategy" placeholder="请输入内容">
                        <t-option label="是" value="A">是</t-option>
                        <t-option label="否" value="B">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="订货策略" name="FOrderPolicy">
                      <t-select v-model="formData.FOrderPolicy" placeholder="请输入内容">
                        <t-option label="是" value="A">是</t-option>
                        <t-option label="否" value="B">否</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="最大订货量" name="FMaxPOQty">
                      <t-input v-model="formData.FMaxPOQty" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="最小订货量" name="FMinPOQty">
                      <t-input v-model="formData.FMinPOQty" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="最小包装量" name="FIncreaseQty">
                      <t-input v-model="formData.FIncreaseQty" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="固定/经济批量" name="FEOQ">
                      <t-input v-model="formData.FEOQ" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label=" 变动提前期批量" name="FVarLeadTimeLotSize">
                      <t-input v-model="formData.FVarLeadTimeLotSize" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="10"></t-col>
                  <t-col :span="5" class="form_col">
                    <t-form-item label="规格文件路径" name="F_ora_Text1">
                      <t-input v-model="formData.F_ora_Text1" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="5" class="form_col">
                    <t-form-item label="图号" name="F_ora_Text1">
                      <t-input v-model="formData.F_ora_Text1" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>
                </t-row>
              </t-space>
            </t-form>
          </div>
        </t-collapse-panel>

        <t-collapse-panel header="辅助参数">
          <div>
            <t-space>
              <t-row :gutter="15">
                <t-col :span="4" class="form_col">
                  <t-checkbox>允许采购</t-checkbox>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-checkbox>允许销售</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>允许库存</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>允许生产</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>允许退货</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>启用售后服务</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>生成产品档案</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>允许退料</t-checkbox>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-checkbox>货源控制</t-checkbox>
                </t-col>
              </t-row>
            </t-space>
          </div>
        </t-collapse-panel>
      </t-collapse>
    </div>

    <div style="display: flex; flex-direction: row; justify-content: center; margin-top: 30px">
      <t-button @click="clickCancel">取消</t-button>
      <t-button :loading="draftSaving" @click="clickSave(true)">暂存</t-button>
      <t-button :loading="isSaving" @click="clickSave(false)">确定</t-button>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { queryMaterialGroupList, saveMaterial, addMaterial, queryMaterialList } from '@/service/material';
import { queryMaterialType } from '@/service/materType';
import router from '@/router';

export default {
  components: {},
  setup(props, { emit }) {
    const visible = ref(false);
    const isAdd = ref(false);
    const route = useRoute();
    const materId = ref();
    const materGroupList = ref([]);
    const materTypeList = ref([]);
    const draftSaving = ref(false);
    const isSaving = ref(false);

    const formData = reactive({});

    const openModal = async (row) => {
      isAdd.value = !row;
      if (!isAdd.value) {
        Object.assign(formData, row);
        // formData
        // const res = await queryMaterialList({FNumber})
        // if(res[0]){
        //   Object.assign(formData,res[0])
        // }
      }
      visible.value = true;
    };

    const loadMaterGroup = async () => {
      const res = await queryMaterialGroupList({});
      if (res) {
        materGroupList.value = res.dataList;
        console.log('loadMaterGroup', materGroupList.value);
      }
    };
    const loadMaterType = async () => {
      const res = await queryMaterialType({});
      if (res) {
        materTypeList.value = res;
      }
    };
    const clickCancel = () => {
      router.go(-1);
    };

    const clickSave = async (isDraft) => {
      if (isDraft) {
        draftSaving.value = true;
      } else {
        isSaving.value = true;
      }
      try {
        let res = null;
        if (materId.value) {
          // 更新
          res = await saveMaterial({
            ...formData,
            is_draft: isDraft,
          });
        } else {
          res = await addMaterial({
            ...formData,
            is_draft: isDraft,
          });
        }
        if (res.success) {
          emit('updateData');
          MessagePlugin.success('保存成功！');
        } else {
          MessagePlugin.error('保存失败！');
        }
      } catch (e) {
        MessagePlugin.error('保存失败！');
      }
      if (isDraft) {
        draftSaving.value = false;
      } else {
        isSaving.value = false;
      }
    };

    const loadMaterData = async () => {
      const res = await queryMaterialList({
        FMATERIALID: materId.value,
        curr_page: 1,
        page_size: 2,
      });
      if (res.dataList[0]) {
        Object.assign(formData, res.dataList[0]);
        console.log('FMaterialGroup', typeof formData.FMaterialGroup);
      }
    };

    onMounted(() => {
      const { id } = route.params;
      if (id) {
        materId.value = id;
        loadMaterData();
      }
      loadMaterGroup();
      loadMaterType();
    });

    return {
      materId,
      visible,
      openModal,
      isAdd,
      clickSave,
      formData,
      materGroupList,
      materTypeList,
      clickCancel,
      draftSaving,
      isSaving,
    };
  },
};
</script>
<style>
.form_col {
  margin-top: 10px;
}
</style>
